<template>
	<view class="container">
		<header-view type="second" leftShow rightShow>{{$t('购入详情')}}</header-view>
		<view class="content">
			<view class="info_header flex_between">
				<view class="info_title">
					{{info.pro_name}}
					<text class="info_code">{{info.pro_code}}</text>
				</view>
				<view class="info_status">
					{{info.status_str}}
				</view>
				<view :class="info.gain>0?'green':'red'">
					{{info.gain}}%
				</view>
			</view>
			<view class="info_detail">
				<view class="detail_title">{{$t('基本信息')}}</view>
				<view class="info_item">
					<view class="name">{{$t('买入类型')}}</view>
					<view class="detail">{{info.type_str}}</view>
				</view>
				<view class="info_item">
					<view class="name">{{$t('订单号')}}</view>
					<view class="detail">{{info.order_sn}}</view>
				</view>
				<view class="info_item">
					<view class="name">{{$t('买入时间')}}</view>
					<view class="detail">{{info.createtime}}</view>
				</view>
				<view class="info_item">
					<view class="name">{{$t('买入价格')}}</view>
					<view class="detail">{{info.market_value}}</view>
				</view>
				<view class="info_item">
					<view class="name">{{$t('持有数量')}}</view>
					<view class="detail">{{info.buy_zhang}}</view>
				</view>
				<view class="info_item">
					<view class="name">{{$t('交易本金')}}</view>
					<view class="detail">{{info.realamount}}</view>
				</view>
				<view class="info_item">
					<view class="name">{{$t('买入类型')}}</view>
					<view class="detail">{{info.type_str}}</view>
				</view>
				<view class="info_item">
					<view class="name">{{$t('杠杆')}}</view>
					<view class="detail">{{info.ganggan}}</view>
				</view>
				<view class="info_item">
					<view class="name">{{$t('类型')}}</view>
					<view class="detail">{{info.price_type_str}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import headerView from "@/components/headerView/index.vue"
	import {
		orderDetailApi
	} from "@/api/api.js"
	export default {
		components: {
			headerView
		},
		data() {
			return {
				id: "",
				info: {}
			}
		},
		onLoad(opt) {
			this.id = opt.id
			this.getInfo()
		},
		methods: {
			getInfo() {
				orderDetailApi({
					id: this.id
				}).then(res => {
					this.info = res.data.data
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding-bottom: 0;

		.content {
			flex: 1;
			overflow: auto;

			.info_header {
				height: 220rpx;
				border-bottom: 10rpx solid #151630;
				padding: 0 24rpx;

				.info_title {
					font-size: 38rpx;
					font-family: FZLanTingHeiT-R-GB;
					font-weight: 400;
					color: #fff;

					.info_code {
						height: 32rpx;
						line-height: 32rpx;
						background: #c62f1f;
						padding: 0 12rpx;
						font-size: 22rpx;
						font-weight: 400;
						color: #fff;
						margin-left: 20rpx;
					}
				}

				.info_status {
					flex-shrink: 0;
					height: 46rpx;
					line-height: 44rpx;
					border: 1rpx solid #8a2f2f;
					border-radius: 6rpx;
					margin: 0 22rpx;
					background: rgba(93, 9, 9, .43);
					font-size: 28rpx;
					font-weight: 400;
					color: #bd1717;
					padding: 0 18rpx;
					white-space: nowrap;
				}

				.green,
				.red {
					padding-right: 14rpx;
					font-size: 40rpx;
					font-weight: 700;
				}
			}

			.info_detail {
				.detail_title {
					height: 150rpx;
					line-height: 150rpx;
					padding: 0 24rpx;
					font-size: 36rpx;
					font-weight: 400;
					color: #fff;
				}

				.info_item {
					height: 84rpx;
					padding: 0 24rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;
					font-weight: 400;

					.name {
						color: #bfbbc3;
					}

					.detail {
						color: #fff;
					}

				}
			}
		}
	}
</style>